<template>
    <div>

        <!-- 1：轮播图 -->
        <swipr :lunbotuList="lunbotuList"></swipr>

        <!-- 2：九宫格 -->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="/home/newslist">
                            <img src="./../../images/menu1.png">
                            <div class="mui-media-body">新闻资讯</div>
                        </router-link>
                    </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="/home/photolist">
                            <img src="./../../images/menu2.png">
                            <div class="mui-media-body">图片分享</div>
                        </router-link>
                    </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="/home/goodslist">
                            <img src="./../../images/menu3.png">
                            <div class="mui-media-body">商品购买</div>
                        </router-link>
                    </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <a href="#">
                            <img src="./../../images/menu4.png">
                            <div class="mui-media-body">留言反馈</div>
                        </a>
                    </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <a href="#">
                            <img src="./../../images/menu5.png">
                            <div class="mui-media-body">视频专区</div>
                        </a>
                    </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <a href="#">
                            <img src="./../../images/menu6.png">
                            <div class="mui-media-body">联系我们</div>
                        </a>
                    </li>
		        </ul> 
    </div>
    
</template>

<script>
import  {lunbotulist} from './../../comment/data/taskDetail.js'
// 14: 子组件
// 14.1： 导入子组件
import swipr from './../subcomponents/swipr'
export default {
    // 1: 组件中的数据
    data(){
        return{
            lunbotuList: []  // 保存轮播图数据
        }
    },

    // 2：方法
    methods: {
        // 轮播图索引改变的事件
        handleChange(index){

        },

        // 获取轮播图数据
        getLunBotu(){
             this.lunbotuList  = lunbotulist;
            // this.$http.get('http://vue.studyit.io/api/getlunbo').then(result => {
            //     console.log(result.body);
            // }, error => {
            //     console.log(error.status);

            //     this.lunbotuList  = lunbotulist;
            // });
        }
    },

    // 3：钩子函数
    created(){
        this.getLunBotu();
    },

    // 14.2: 把子组件 挂载 到父组件中
    components: {
        swipr
    }

}
</script>

<style lang="scss" scoped>
.mint-swipe{
    height: 200px;
    // 规定属于其父元素的第二个子元素的每个 p 的背景色：
    .mint-swipe-item{
        img{
            width: 100%;
            height: 100%;
        }
    }
}

.mui-grid-view.mui-grid-9{
    background-color: white;
    border: 0px;
    img {
            width: 60px;
            height: 60px;
    }
    .mui-media-body{
        font-size: 13px;
    }
}

.mui-grid-view.mui-grid-9.mui-table-view-cell{
   
    border: 0px;
    
}


</style>